<template>
  <i v-if="!isImage" :class="'ee-icon iconfont ' + (icon ?? '')">
    <slot></slot>
  </i>
  <img v-else :src="icon" />
</template>

<script type="text/javascript">
/** 可以在 iconfont/demo_index.html 的 Font class 页签下，控制台中输入以下代码然后 copy 打印的对象粘贴即可
 * 
 * [...document.querySelectorAll('[style*=block] .code-name')].reduce((obj, i) => { const k = i.innerText.substr(1); obj[k] = k; return obj; }, {})
 * 
 * 这是所有内置的 iconfont 的图标
 */
export const icons = {
  "icon-iconfontshuru": "icon-iconfontshuru",
  "icon-iconfonthot": "icon-iconfonthot",
  "icon-iconfonttehuijingxuan": "icon-iconfonttehuijingxuan",
  "icon-iconfontok": "icon-iconfontok",
  "icon-iconfontfavfill": "icon-iconfontfavfill",
  "icon-iconfontjinggao": "icon-iconfontjinggao",
  "icon-iconfonticon6": "icon-iconfonticon6",
  "icon-iconfontjia": "icon-iconfontjia",
  "icon-iconfonticonfontcncha": "icon-iconfonticonfontcncha",
  "icon-iconfonticonfontzhifubao": "icon-iconfonticonfontzhifubao",
  "icon-iconfontxiaoxi": "icon-iconfontxiaoxi",
  "icon-iconfontcog": "icon-iconfontcog",
  "icon-iconfontpengyouquan": "icon-iconfontpengyouquan",
  "icon-iconfontlock": "icon-iconfontlock",
  "icon-iconfonthome0": "icon-iconfonthome0",
  "icon-iconfonticonfontlocationfill": "icon-iconfonticonfontlocationfill",
  "icon-custom-tolove": "icon-custom-tolove",
  "icon-iconfontvoicefill": "icon-iconfontvoicefill",
  "icon-iconfontwenhao1": "icon-iconfontwenhao1",
  "icon-iconfontxuanzhong1": "icon-iconfontxuanzhong1",
  "icon-iconfonticonfonti2": "icon-iconfonticonfonti2",
  "icon-iconfonticonfonti2copy": "icon-iconfonticonfonti2copy",
  "icon-iconfonticonfonti2copycopy": "icon-iconfonticonfonti2copycopy",
  "icon-iconfontgerenzhongxin31": "icon-iconfontgerenzhongxin31",
  "icon-iconfontchexiao": "icon-iconfontchexiao",
  "icon-iconfonticontihuan": "icon-iconfonticontihuan",
  "icon-iconfonticon7": "icon-iconfonticon7",
  "icon-iconfontziliao": "icon-iconfontziliao",
  "icon-iconfontihou": "icon-iconfontihou",
  "icon-ai-weixin": "icon-ai-weixin",
  "icon-iconfontgift-copy-copy-copy": "icon-iconfontgift-copy-copy-copy",
  "icon-iconfontdianying": "icon-iconfontdianying",
  "icon-iconfontanquan": "icon-iconfontanquan",
  "icon-iconfontcamerafill": "icon-iconfontcamerafill",
  "icon-iconfontjudian": "icon-iconfontjudian",
  "icon-iconfontlicai": "icon-iconfontlicai",
  "icon-weibiaoti1": "icon-weibiaoti1",
  "icon-zengjia": "icon-zengjia",
  "icon-jianshao": "icon-jianshao",
  "icon-iconfont-tuiguang": "icon-iconfont-tuiguang",
  "icon-ios": "icon-ios",
  "icon-zuojiantou": "icon-zuojiantou",
  "icon-iconfont-jiesuan": "icon-iconfont-jiesuan",
  "icon-anzhuo": "icon-anzhuo",
  "icon-weixin": "icon-weixin"
}

export default {
  name: "ee-icon",
  props: {
    icon: {
      type: String,
      /** @type {keyof icons} */
      default: undefined,
    }
  },
  computed: {
    isImage() {
      const icon = this.icon;
      return icon && icon.length && !icons[icon] && (icon[0] == '/' || icon.startsWith('http') || icon.lastIndexOf('.') != -1);
    }
  }
}
</script>

<style lang="css">
.ee-icon {
  /* position: relative; */
}
</style>